#{extends 'simpleTemplate.html'/}

<link href="@{'/public/css/taskboard.css'}" rel="stylesheet">

<script>
    $(function () {
        // map column-name ->
        var state = {
        };

        $("#taskboard").addClass("active");

        var columns = $(".tb-column");

        // calc initial state
        columns.find(".tb-task").each(function (idx, val) {
            var $val = $(val);
            var task_id = $val.attr('id');
            var column_id = $val.parent().attr('id');
            if (task_id && column_id && task_id != '' && column_id != '') {
                state[task_id] = column_id;
            }
        });
        console.log(state);

        columns.sortable({
            items: "div.tb-task",
            connectWith: ".tb-column",
            stop: function (event, ui) {
                var $item = $(ui.item);
                var id = $item.attr('id');
                var prev = state[id];
                var curr = $item.parent().attr('id');
                if (curr != prev) {
                    console.log('Card ' + id + ' has been moved from ' + prev + ' to ' + curr);
                    state[id] = curr;
                }
            },
            start: function (event, ui) {
                ui.item.addClass('on-drag');
            },
            beforeStop: function (event, ui) {
                ui.item.removeClass('on-drag');
            }
        });

        $(".tb-task").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
                .find(".tb-task-header")
                .addClass("ui-corner-all")
                .prepend("<span class='ui-icon ui-icon-minusthick'></span>")
                .end()
                .find(".tb-task-content");

        $(".tb-task-header .ui-icon").click(function () {
            $(this).toggleClass("ui-icon-minusthick").toggleClass("ui-icon-plusthick");
            $(this).parents(".tb-task:first").find(".tb-task-content").toggle();
        });

        columns.disableSelection();

        $(".add-item").click(function () {
            alert("Trying to add new element to " + $(this).parent().attr('id'));
        });
    });
</script>

<div class="content">
    <div class="content-header">
        <h2>TaskBoard</h2>
    </div>
    <div class="content-body">

        <div class="tb-column" id="column-name-1">

            <div class="tb-column-header">
                To do
            </div>

            <div class="tb-task" id="card-1-1">
                <div class="tb-task-header">Chat for the system</div>
                <div class="tb-task-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
            </div>

            <div class="tb-task" id="card-1-2">
                <div class="tb-task-header">Graphs & statistics</div>
                <div class="tb-task-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
            </div>

            <div class="tb-task" style="display: none">
            </div>

            <div class="tb-add-item">
                Add item
            </div>

        </div>

        <div class="tb-column" id="column-name-2">

            <div class="tb-column-header">
                In progress
            </div>

            <div class="tb-task" id="card-2-1">
                <div class="tb-task-header">Task board</div>
                <div class="tb-task-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
            </div>

            <div class="tb-task" style="display: none">
            </div>

            <div class="tb-add-item">
                Add item
            </div>

        </div>

        <div class="tb-column" id="column-name-3">

            <div class="tb-column-header">
                Done
            </div>

            <div class="tb-task" id="card-3-1">
                <div class="tb-task-header">SVN repository</div>
                <div class="tb-task-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
            </div>

            <div class="tb-task" id="card-3-2">
                <div class="tb-task-header">Trello board</div>
                <div class="tb-task-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
            </div>

            <div class="tb-task" style="display: none">
            </div>

            <div class="tb-add-item">
                Add item
            </div>

        </div>

    </div>
</div>


